<template v-loading="mod">
  <div class="box">
    <div class="topBox"></div>
    <div class="bottonBox">
      <div class="buttonDolog">
        <el-button class="AddBut" type="danger" @click="adDialog"
          >新增车辆</el-button
        >
      </div>
      <div class="tableBox">
        <!-- 表格数据 -->
        <el-table
          v-loading="loading"
          :header-cell-style="{ 'background-color': '#f8faff' }"
          border
          :data="tableData.items"
          style="width: 100%"
        >
          <el-table-column label="序号" width="60" prop="allowableLoad" />
          <el-table-column prop="id" label="车型编号" width="187" />
          <el-table-column prop="name" label="车辆类型" width="102" />
          <el-table-column
            label="车型数量"
            width="102"
            prop="allowableVolume"
          />
          <el-table-column
            label="应载重量 (吨)"
            width="153"
            prop="measureLong"
          />
          <el-table-column label="应载体积 (立方米)" width="153" prop="name" />
          <el-table-column label="长 (米)" width="102" prop="measureLong" />
          <el-table-column prop="measureWidth" label="宽 (米)" width="102" />
          <el-table-column label="高 (米)" width="102" prop="measureHigh" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <div class="boxrr">
                <span style="color: #419eff" @click="editData(row.id)"
                  >编辑</span
                >
                ｜
                <span style="color: #f56c6c" @click="del(row.id)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="demo-pagination-block">
          <el-pagination
            :page-sizes="[100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(tableData.counts)"
            @change="currentChange"
          />
        </div>
      </div>
    </div>
    <DialogComponents ref="dialog">
      <!-- 表单整体 -->
      <template #from>
        <div class="formBOX">
          <el-form
            ref="formlabelref"
            label-width="auto"
            style="max-width: 600px"
          >
            <el-form-item label="车辆类型">
              <el-input v-model="formData.name" />
            </el-form-item>
            <el-form-item label="应载重量">
              <el-input v-model="formData.allowableLoad" />
            </el-form-item>
            <el-form-item label="应载体积">
              <el-input v-model="formData.allowableVolume" />
            </el-form-item>
            <el-form-item label="长">
              <el-input v-model="formData.measureLong" />
            </el-form-item>
            <el-form-item label="宽">
              <el-input v-model="formData.measureWidth" />
            </el-form-item>
            <el-form-item label="高">
              <el-input v-model="formData.measureHigh" />
            </el-form-item>
          </el-form>
          <div class="formBut">
            <el-button type="danger" @click="addData">确认</el-button>
            <el-button @click="dialog.value.setDialogSwitch(false)"
              >取消</el-button
            >
          </div>
        </div>
      </template>
    </DialogComponents>
    <!-- 删除弹窗 -->
    <addDialog ref="showBox" @clickDialog="clickDialog" />
  </div>
</template>
<script lang="ts" setup>
import {
  getVehicleManagementApi,
  addListData,
} from '../../api/VehicleManagement';
import { formDataType } from './types/index';
import addDialog from './components/addDialog.vue';
import DialogComponents from '../../components/DialogComponents.vue';
//表单数据收集
const formData: formDataType = reactive({
  allowableLoad: 10, //重量
  allowableVolume: 10, //体积
  measureHigh: 10, // 高
  measureLong: 10, //长
  measureWidth: 10, //宽
  name: '栗子念', //名字
});
const loading = ref<boolean>(true);
let tableData: any = reactive({});
const formlabelref = ref(null);
const tableDataPage = reactive({
  page: 1,
  pageSize: 10,
});

//列表数据获取方法
const getVehicleManagementData = async () => {
  const { data } = await getVehicleManagementApi(tableDataPage);
  //列表数据
  const res = data;
  tableData = res;
  console.log(tableData);
  loading.value = false;
};
getVehicleManagementData();
// 点击删除后的确认弹窗
const clickDialog = async () => {
  loading.value = true;
  await getVehicleManagementData();
  loading.value = false;
};
//增&删&改&查
const addData = async () => {
  dialog.value.setDialogSwitch(false);
  loading.value = true;
  const res = await addListData(formData);
  await getVehicleManagementData();
  loading.value = false;
};
//打开弹窗方法
const dialog = ref(null);
const adDialog = () => {
  dialog.value.setDialogSwitch(true);
  formlabelref.value.resetField();
};

//打开编辑框
const editData = async (id) => {
  dialog.value.setDialogSwitch('edit', true);
  type.value = 'edit';
  const res = await echoData(id);
  console.log(res + '@@@----------------');
};
//打开删除框
const showBox = ref(null);
const del = (id: string) => {
  showBox.value.showDialog(true, id);
};
//分页器功能
const currentChange = async (pages: number) => {
  tableDataPage.page = pages;
  loading.value = true;
  await getVehicleManagementData();
  loading.value = false;
};
</script>

<style lang="less" scoped>
.box {
  // background-color: pink;
  .topBox {
    height: 140px;
    background-color: #ffffff;
  }
  .bottonBox {
    margin-top: 20px;
    padding: 28px 28px 28px 28px;
    background-color: #ffffff;
  }
  .AddBut {
    width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    border-color: transparent;
  }
  .tableBox {
    margin-top: 20px;
    .topStyle {
      background-color: #f8faff;
    }
    .demo-pagination-block {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
  }
}
.formBOX {
  // height: 300px;
  padding: 20px 60px 0 30px;
  .el-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  // background-color: #e15536;
}
.formBut {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
  margin: 14px 0 38px !important;
  .el-button {
    width: 90px;
    height: 40px;
    border-radius: 5px;
    font-weight: 400;
  }
  .el-button:nth-child(1) {
    color: #fff;
    border: 1px solid #e15536;
  }
  .el-button:nth-child(2) {
    color: #000;
    border: 1px solid #d8dde3;
  }
}
.boxrr {
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    cursor: pointer;
  }
}
.el-input {
  height: 40px;
  width: 380px;
}
</style>
